<template>
  <div class="page-container-padding">
    <div v-if="currentUserId < 0" style="width: 480px">
      <el-form ref="menuForm" :model="newUser" label-width="100px">
        <el-form-item label="昵称">
          <el-input
            v-model.trim="newUser.nickname"
            placeholder="用户昵称,默认为随机系统号,非必须"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model.trim="newUser.phone"
            placeholder="用户手机号,非必须"
          ></el-input>
        </el-form-item>
        <el-form-item label="有效期">
          <el-input
            v-model="newUser.expire"
            placeholder="用户有效期, 必须,格式yyyy-mm-dd"
          ></el-input>
        </el-form-item>
        <el-form-item label="系统角色">
          <el-select v-model="newUser.role_code">
            <el-option :value="1000" label="普通用户"></el-option>
            <el-option :value="3000" label="品种研究员"></el-option>
            <el-option :value="4000" label="特别研究员"></el-option>
            <el-option :value="2000" label="营业部用户"></el-option>
            <el-option :value="9000" label="普通管理员"></el-option>
            <el-option :value="9999" label="超级管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份角色">
          <el-select v-model="newUser.out_role">
            <el-option :value="254" label="投资经理"></el-option>
            <el-option :value="253" label="咨询人员"></el-option>
            <el-option :value="252" label="研究人员"></el-option>
            <el-option :value="251" label="资管支持人员"></el-option>
            <el-option :value="250" label="客户"></el-option>
            <el-option :value="248" label="营业部用户"></el-option>
            <el-option :value="249" label="业务人员"></el-option>
            <el-option :value="255" label="开发人员"></el-option>
            <el-option :value="100" label="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input
            v-model.trim="newUser.admin_name"
            placeholder="后台管理备注名(真实姓名)"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model.trim="newUser.password"
            placeholder="有手机号时为默认后6位，无手机号时默认123456"
          ></el-input>
        </el-form-item>
        <el-form-item label="分析师">
          <el-checkbox
            v-model="newUser.is_analyst"
            :true-label="1"
            :false-label="0"
          >
            是
          </el-checkbox>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <div style="display: flex">
            <el-button
              style="margin-left: auto"
              type="primary"
              :loading="createLoading"
              @click="createNewUser"
            >
              确认新增
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <div>
        <div class="desc-title">
          基础信息
          <i
            v-if="baseInfoEditing"
            style="margin-left: 6px; cursor: pointer"
            class="el-icon-circle-check"
            @click="saveBaseInfo"
          ></i>
          <i
            v-else
            style="margin-left: 6px; cursor: pointer"
            class="el-icon-edit-outline"
            @click="baseInfoEditing = true"
          ></i>
        </div>
        <el-descriptions
          :column="3"
          border
          label-class-name="desc-label"
          content-class-name="desc-content"
        >
          <el-descriptions-item v-for="item in baseInfo" :key="item.key">
            <template slot="label">
              {{ item.title }}
            </template>
            <div
              v-if="baseInfoEditing && baseInfoEditKeys.indexOf(item.key) > -1"
            >
              <el-input
                v-model="item.text"
                :placeholder="item.key === 'password' ? '不填则不修改' : ''"
              ></el-input>
            </div>
            <div v-else-if="baseInfoEditing && item.key === 'role_code'">
              <el-select v-model="item.role_code">
                <el-option :value="9999" label="超级管理员"></el-option>
                <el-option :value="9000" label="普通管理员"></el-option>
                <el-option :value="4000" label="特别研究员"></el-option>
                <el-option :value="3000" label="品种研究员"></el-option>
              </el-select>
            </div>
            <div v-else-if="baseInfoEditing && item.key === 'out_role'">
              <el-select v-model="item.out_role">
                <el-option :value="252" label="研究人员"></el-option>
                <el-option :value="254" label="投资经理"></el-option>
                <el-option :value="253" label="咨询人员"></el-option>
                <el-option :value="251" label="资管支持"></el-option>
                <el-option :value="249" label="业务人员"></el-option>
                <el-option :value="250" label="客户"></el-option>
                <el-option :value="255" label="开发人员"></el-option>
                <el-option :value="100" label="其他人员"></el-option>
              </el-select>
            </div>
            <div v-else-if="baseInfoEditing && item.key === 'is_analyst'">
              <el-checkbox
                v-model="item.is_analyst"
                :true-label="1"
                :false-label="0"
              >
                分析师
              </el-checkbox>
            </div>
            <div v-else>
              <div v-if="item.key === 'is_analyst'">
                <el-tag :type="item.is_analyst === 1 ? '' : 'danger'">
                  {{ item.is_analyst === 1 ? '是' : '否' }}
                </el-tag>
              </div>
              <div v-else>{{ item.text }}</div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 拓展信息 -->
      <div class="desc-item">
        <div class="desc-title">拓展信息</div>
        <el-descriptions
          :column="3"
          border
          label-class-name="desc-label"
          content-class-name="desc-content"
        >
          <el-descriptions-item v-for="item in extendInfo" :key="item.key">
            <template slot="label">
              {{ item.title }}
            </template>
            {{ item.text }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 证书列表 -->
      <div class="desc-item">
        <div class="desc-title">证书列表</div>
        <el-descriptions :column="1" border label-class-name="desc-label">
          <el-descriptions-item v-for="item in certificates" :key="item.date">
            <template slot="label">
              {{ item.date }}
            </template>
            {{ item.name }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 奖项情况 -->
      <div class="desc-item">
        <div class="desc-title">获奖情况</div>
        <el-descriptions :column="1" border label-class-name="desc-label">
          <el-descriptions-item v-for="item in prizes" :key="item.date">
            <template slot="label">
              {{ item.date }}
            </template>
            {{ item.name }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 瑞币管理 -->
      <div class="desc-item">
        <div class="desc-title">瑞币设置</div>
        <el-descriptions :column="2" border label-class-name="desc-label">
          <el-descriptions-item>
            <template slot="label">当前瑞币：</template>
            {{ quotaObj.lastQuota }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">最近记录：</template>
            <span style="padding-right: 20px">{{ quotaObj.lastTime }}</span>
            <span>{{ quotaObj.lastDesc }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">操作数额：</template>
            <el-input
              v-model="quotaObj.newQuotaNum"
              size="mini"
              placeholder="输入要改变的数额，重置时为重置额。"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">瑞币选项：</template>
            <el-button size="mini" type="danger" @click="toChangeQuota('add')">
              +增加
            </el-button>
            <el-button size="mini" @click="toChangeQuota('reset')">
              重置
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="toChangeQuota('reduce')"
            >
              -减少
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetUserObjInformation,
    SaveUserBaseInfo,
  } from '@/api/systemManage/userInfo'
  import { QueryUserLastQuota, ChangeUserQuota } from '@/api/prodService/quota'
  export default {
    data() {
      return {
        currentUserId: -1,
        createLoading: false,
        newUser: {
          nickname: '',
          phone: '',
          expire: '',
          role_code: 1000,
          out_role: 100,
          admin_name: '',
          password: '',
          is_analyst: 0,
        },
        baseInfoEditing: false,
        baseInfo: [],
        baseInfoEditKeys: [
          'expire',
          'nickname',
          'phone',
          'admin_name',
          'password',
        ],
        extendInfo: [],
        certificates: [],
        prizes: [],
        // 瑞币
        quotaObj: {
          lastTime: '',
          lastDesc: '',
          lastQuota: 0,
          newQuotaNum: null,
        },
      }
    },
    computed: {
      infoObj() {
        let obj = {}
        this.baseInfo.forEach((element) => {
          obj[element.key] = element[element.key] || element.text
          if (element.key === 'is_analyst') {
            obj.is_analyst = element.is_analyst // 特别对待，否则没变啊
          }
        })
        return obj
      },
    },
    mounted() {
      this.currentUserId = this.$route.query.uid
      if (this.currentUserId > 0) {
        this.getUserInfo()
        this.getUserLastQuota()
      } else {
        this.currentUserId = -1
        // this.$confirm('请从用户管理页面进入', '提示', {
        //   confirmButtonText: '确定',
        //   type: 'error',
        //   center: true,
        //   callback: () => {},
        // })
        // 显示用户添加页面
      }
    },
    methods: {
      getUserLastQuota() {
        QueryUserLastQuota(this.currentUserId).then((res) => {
          const data = res.data
          this.quotaObj.lastTime = data.last_time
          this.quotaObj.lastDesc = data.last_desc
          this.quotaObj.lastQuota = data.last_quota
        })
      },

      // 改变瑞币
      toChangeQuota(action) {
        const changeItem = {
          uid: this.currentUserId,
          action: action,
          new_quota: this.quotaObj.newQuotaNum,
        }
        if (!changeItem.new_quota) {
          this.$baseMessage('请输入改变的数额', 'error')
          return
        }
        ChangeUserQuota(changeItem).then((res) => {
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          if (res.code === 200) {
            this.quotaObj.newQuotaNum = null
          }
          this.getUserLastQuota()
        })
      },

      getUserInfo() {
        GetUserObjInformation(this.currentUserId).then((res) => {
          const data = res.data
          this.baseInfo = data.sys_info
          this.extendInfo = data.base_info
          this.certificates = data.certificates
          this.prizes = data.prizes
        })
      },
      // 新增用户
      createNewUser() {
        if (
          this.newUser.expire.length < 1 ||
          this.newUser.admin_name.length < 1
        ) {
          this.$baseMessage('请填写完整信息', 'error')
          return
        }
        this.createLoading = true
        this.newUser.expire = this.newUser.expire.replaceAll('-', '/')
        SaveUserBaseInfo(this.newUser)
          .then((res) => {
            this.createLoading = false
            this.newUser.expire = ''
            this.newUser.admin_name = ''
            this.$baseMessage('新建成功，前往用户管理查看。', 'success')
          })
          .catch(() => {
            this.createLoading = false
          })
      },

      // 保存编辑后的基础信息
      saveBaseInfo() {
        const userData = {
          id: this.currentUserId,
          nickname: this.infoObj.nickname,
          phone: this.infoObj.phone,
          expire: this.infoObj.expire.replaceAll('-', '/'),
          role_code: this.infoObj.role_code,
          out_role: this.infoObj.out_role,
          is_analyst: this.infoObj.is_analyst,
          admin_name: this.infoObj.admin_name,
        }
        if (this.infoObj.password.length > 1) {
          userData.password = this.infoObj.password
        }
        SaveUserBaseInfo(userData)
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.baseInfoEditing = false
            this.getUserInfo()
          })
          .catch(() => {
            this.getUserInfo()
            this.baseInfoEditing = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .desc-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .desc-item {
    margin-top: 24px;
  }
  .el-descriptions ::v-deep .desc-label {
    width: 220px;
    max-width: 220px;
  }
  .el-descriptions ::v-deep .desc-content {
    width: 400px;
  }
</style>
